Tabs.tabDelimeter = '&nbsp;&nbsp;';

function Tabs(rootElem, hTabs) {
	
	if (!Tabs.number) Tabs.number = 0;
	Tabs.number++;
	
	this.root = rootElem;
	
	this.tabs = [];
	this.tabTitles = [];	

	for (var tabTitle in hTabs) {
		this.tabTitles[this.tabTitles.length] = tabTitle;
		this.tabs[this.tabs.length] = hTabs[tabTitle];
	}
	
	this.changeTab(0);
}

Tabs.prototype.changeTab = function(num)  {	
	if (num >= this.tabs.length) num = (this.tabs.length - 1);
	this.showTab(num);
	this.showBar(num);
}


Tabs.prototype.showTab = function(num) {	
	
	for (var i = 0; i < this.tabs.length; i++) {
		
		var tab = this.tabs[i];
		
		if (tab instanceof Array) {
			for (var j = 0; j < tab.length; j++)
				tab[j].style.display = (i == num) ? 'block' : 'none';
		} else {
			tab.style.display = (i == num) ? 'block' : 'none';
		}		
	}
}

Tabs.prototype.showBar = function(num) {	
		
	var delimeterText = Tabs.tabDelimeter;	
	var tab, html = '', me = this;
		
	this.root.innerHTML = '';	
	for (var i = 0; i < this.tabTitles.length; i++) {

		if (i > 0) {		
			delimeter = document.createElement('span');
			delimeter.className = 'tabDelimeter';
			delimeter.innerHTML = delimeterText;
			this.root.appendChild(delimeter);
		}
		
		tab = document.createElement('span');
		tab.innerHTML = this.tabTitles[i];
		
		if (i == num) {
			tab.className = 'tab currentTab';
		} else {
			tab.className = 'tab pseudolink';
			tab.number = i;
			tab.onclick = function() { me.changeTab(this.number); };
		};
		
		this.root.appendChild(tab);
	}	
}